<template>
  <div class="greeting">
    <div class="title border-bottom">
      <router-link tag="i" to="/personal" class="icon-xiangzuo"></router-link>
      <router-link tag="p" to="/personal">个人中心</router-link>
      我的贺卡
      <span @touchend="establish">创建</span>
    </div>
    <div class="empty" v-if="!List.length">
      <p><img src="~common/image/imgEmpty.png" alt=""></p>
      <p>目前还没有贺卡</p>
      <p>小主人赶紧去创建吧～</p>
    </div>
    <ul>
      <li v-for="item in List" @click="jumpDetails(item.id)">
        <h3>{{item.title}}</h3>
        <span>
          点击查看
          <i class="icon-xiangyou"></i>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
  import {CardTitle} from 'common/js/greeting'
  import {setTitle} from 'common/js/title'
  import {computePV} from 'common/js/statistics'

  export default {
    data() {
      return {
        List: [],
        cardId:'',
        showHint:false,
      }
    },
    mounted() {
      computePV({
        page_type:2
      })
      setTitle('我的贺卡')
      CardTitle().then(res => {
        if (res.status === 1) {
          this.List = res.data;
          this.cardId = res.expand.card_id
        }
      })
    },
    methods: {
      //跳转到详情页
      jumpDetails(id){
        this.$router.push('/greetingDetail/'+id+'/'+this.cardId);
      },
      //创建贺卡
      establish() {
        this.$router.push('/greetingTitle');
      },
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .title
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: $background;
    line-height: 1.5rem
    text-align: center;
    font-size: .55rem;
    color: $color-title;
    i
      position: absolute;
      top: 0;
      left: .5rem;
      line-height: 1.5rem;
      font-size: .6rem;
      color: $color-l-z;
    p
      position :absolute;
      top:0;
      left:.8rem;
      line-height:1.5rem;
      width:2.5rem;
      font-size :.43rem;
    span
      position: absolute;
      top: 0;
      right: .5rem;
      line-height: 1.5rem;
      display: inline-block;
      font-size: .44rem;

  ul
    padding: 2rem .5rem .5rem .5rem;
    li
      width: 100%;
      height: 3.52rem;
      margin-bottom: .4rem;
      border-radius: .2rem;
      text-align: center;
      color: $color;
      h3
        height: 2.2rem;
        line-height: 2.2rem;
        overflow: hidden;
        font-size: .77rem;
      span
        display: inline-block;
        line-height: .66rem;
        padding: 0 .33rem;
        border-radius: .33rem;
        border: 1px solid #fff;
        font-size: .25rem;
  .empty
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .35rem;
    line-height: .55rem;
    color: $color-input-p;
    img
      width: 3rem;
      height: 3rem;
      margin-bottom: .55rem;

  li:nth-child(1n)
    background: url("~common/image/greeting-back1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

  li:nth-child(2n)
    background: url("~common/image/greeting-back2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;


</style>
